<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
      margin: 0;
      /* 隐藏body窗口区域滚动条 */
      overflow: hidden;
    }
  </style>
  <!-- 引入前端框架vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
  <!-- 引入threejs扩展控件OrbitControls.js -->
  <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <div id="app">
    <div style="position: absolute;bottom: 0px;" :style="{left:leftCenter+'px'}">
      <!-- 设置颜色UI按钮，单击事件click1、click2、click3 -->
      <img src="按钮UI/g.png" style="border-radius:25px" width=50 height=50 @click="click1()">
      <img src="按钮UI/o.png" style="border-radius:25px" width=50 height=50 @click="click2()">
      <img src="按钮UI/w.png" style="border-radius:25px" width=50 height=50 @click="click3()">
    </div>
  </div>
  <script>
    /**
     * 创建场景对象
     */
    var scene = new THREE.Scene();

    var loader = new THREE.ObjectLoader(); //模型加载器

    // 加载模型文件，加载"model.json"文件返回一个网格模型对象，包含玉镯的几何体和包含纹理贴图的材质
    loader.load("model.json", function (Object3D) {
      // 对玉镯对象进行命名,render函数中可以通过getObjectByName方法把name作为参数遍历到玉镯进行旋转操作
      Object3D.name = "obj";
      Object3D.scale.set(3, 3, 3); //对象缩放操作
      Object3D.geometry.center(); // 玉镯网格模型的几何体geometry居中
      Object3D.position.set(0, 0, 0); //玉镯网格模型位置设置
      // 玉镯对象添加到场景
      scene.add(Object3D)

      //创建纹理加载器
      var textureLoader = new THREE.TextureLoader();
      // 加载玉镯的三张颜色贴图   可以通过程序切换或者UI按钮进行交互切换
      var texture1 = textureLoader.load('texture1.png'); //绿色颜色纹理
      var texture2 = textureLoader.load('texture2.png'); //黄色颜色纹理
      var texture3 = textureLoader.load('texture3.png'); //白色颜色纹理


      // 重置玉镯材质对象的颜色贴图属性map
      // 设置vue代码
      const vm = new Vue({
        el: "#app",
        data: {},
        methods: {
          // 单击切换为绿色
          click1() {
            Object3D.material.map = texture1;
          },
          // 单击切换为黄色
          click2() {
            Object3D.material.map = texture2;
          },
          // 单击切换为白色
          click3() {
            Object3D.material.map = texture3;
          },
        },
        computed: {
          // 设置居中
          leftCenter: function () {
            return (window.innerWidth - 150) / 2
          },
        }
      })
    });
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 100; //三维场景缩放系数
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 20, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    function render() {
      renderer.render(scene, camera); //执行渲染操作
      requestAnimationFrame(render);
      // 玉镯旋转动画进行展示
      if (scene.getObjectByName('obj')) {
        scene.getObjectByName('obj').rotateY(0.01)
      }
    }
    render();
    var controls = new THREE.OrbitControls(camera); //创建控件对象
  </script>
</body>

</html>